<template>
  <s-layout navbar="normal" selffixed="true" boxbg="true">
			<view>

					<view class="tabcon2">
						<view class="ss-flex ss-row-between vasp-form">
              <span style="font-size: 18px">请输入兑换码：</span>
								<input
                  class="input-box"
                  id="input1"
                  value=""
                  type="number"
                  :maxlength="5"
                  placeholder="左上5位数字"
                  v-model="state.inputs.input1"
                  @input="nextfocus('input2')"
                  focus

                />
                <input
                  class="input-box"
                  id="input2"
                  value=""
                  type="number"
                  :maxlength="5"
                  placeholder="右上5位数字"
                  :focus="state.inputs.input1.length === 5"
                  v-model="state.inputs.input2"
                  @input="nextfocus('input3')"

                />

                <input
                  class="input-box"
                  id="input3"
                  value=""
                  type="number"
                  :maxlength="5"
                  placeholder="左下5位数字"
                  v-model="state.inputs.input3"
                  :focus="state.inputs.input2.length === 5"
                  @input="nextfocus('input4')"
                   />
								<input
                  class="input-box"
                  id="input4"
                  value=""
                  type="number"
                  :maxlength="5"
                  placeholder="右下5位数字"
                  v-model="state.inputs.input4"
                  :focus="state.inputs.input3.length === 5"
                />
              <button
                class="mit-vasp"
                style="width: 100px;"
                type="warn"
                @click="getinputstrs"
              >兑换
              </button>
              <a href="javascript:;" style="color:#5eb95e" @tap="sheep.$router.go('/pages/index/user?path=richtext&id=18')">如何兑换增值服务</a>
            </view>

					</view>
      </view>

			<view class="image-content">
			<image 
        style="width: 100%; height: auto; display: block; margin: 0 auto;"
        src="@/static/images/qywx-foot.png"
        mode="widthFix"
			></image>
			</view>
  </s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, ref } from 'vue';  
	import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
  import modal from '@/sheep/store/modal';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
	const users = sheep.$store('user');

	onLoad((options) => {
		//sheep.$api.dhzengzhi.checklogin({})
	});
	const state = reactive({
		tabindex: 1,
		resstr:'',
		inputarr:['0','0','0','0'],
		resstrinput:'',
    inputs:
      {
        input1:'',
        input2:'',
        input3:'',
        input4:'',
      },
    auth:'',

		});
  const siteBar=reactive({
    type:true,
    data:[{
      name:'首页',
      url:'/pages/index/index',
    },
      {
        name:'增值包兑换',
        url:'/pages/vasp/duihuan',
      }
    ]
  });

function nextfocus(vasp_str){
  console.log(state.inputs.input1.length);
  document.getElementById(vasp_str).focus();
  if(vasp_str=='input2' && state.inputs.input1.length===5){
    //document.getElementById('input1')
    document.getElementById(vasp_str).focus();
  }
  if(vasp_str=='input3' && state.inputs.input2.length===5){
    document.getElementById(vasp_str).focus();
  }
  if(vasp_str=='input4' && state.inputs.input3.length===5){
    document.getElementById(vasp_str).focus();
  }
}



  /* 获取sn的详细信息 */
  function get_zengzhibao(sn){
    //sheep.$helper.toast('增值包加载中…');
    sheep.$api.dhzengzhi.get_zengzhibao(sn).then((res)=>{
      if(res.code === 1){
        //state.vasp_data = res.data;
        navigateTo("/pages/index/user?path=success&sn="+sn)
      }else{
        sheep.$helper.toast('您已经兑换过此增值服务包');
        navigateTo("/pages/vasp/toerror?msg="+res.msg);
      }

      /*console.log(state.vasp_data.child);*/
      /*      //获取用户已经兑换的增值包
            sheep.$api.dhzengzhi.get_my_zengzhibaocon().then((res) => {
              state.user_vasp_data = res.data;
              //对当前的用户已经兑换的增值包获取后，进行比对
              let newArray = state.vasp_data.child.filter(item1 =>
                !state.user_vasp_data.some(item2 => item2.ordertitle === item1.title)
              );
              state.vasp_data.child = newArray;
            });*/
      /*if(state.vasp_data.child == null){
        navigateTo("/pages/vasp/toerror");
        state.vasp_data.child = [];
      }*/
    });
  }


	
	function getinputstrs()
	{
		var resstrinputs = state.inputs.input1+state.inputs.input2+state.inputs.input3+state.inputs.input4;
		//console.log(resstrinputs);
		 if(resstrinputs.length !== 20)
		 {
			 sheep.$helper.toast('请正确输入20位数字');
			 return false;
		 }else{
			 state.resstrinput = resstrinputs;
			 		sheep.$api.dhzengzhi.checkisbn({
			 			'sn': state.resstrinput
			 		}).then((res) => {
			 						 //console.log(res);
			 			if(res){
			 							if (res.code == 1) {
                      get_zengzhibao(state.resstrinput);
			 								//sheep.$helper.toast(res);
			 							} else{
			 								// SN码无效
                      //SN码已经被使用
			 								sheep.$helper.toast(res.msg);
                      sheep.$router.go("/pages/vasp/toerror?msg="+res.msg+'兑换码已经过期');
			 							}
            }else{

			 						}
			 		});

		 }
	}
	function handleInput(side, event) {
	  switch (side) {
	    case 'in1':  
	      state.inputarr[0] = event; // 更新第一个输入框的值  
	      break;  
	    case 'in2':  
	      state.inputarr[1] = event; // 更新第二个输入框的值  
	      break;  
	    case 'in3':  
	      state.inputarr[2] = event; // 更新第三个输入框的值（注意修正了拼写错误）
	      break;  
	    case 'in4':  
	      state.inputarr[3] = event; // 更新第四个输入框的值
	      break;  
	    default:  
	      console.error('Unknown input side:', side); // 处理未知情况
	  }
	}
	function navigateTo(path) {
		sheep.$router.go(path);
		}
    onLoad(()=>{

    })
</script>

<style scoped>
  :deep(.page-body){
      background-color: #ffffff !important;
  }
  .vasp-form{
    width: 960px !important;
    margin-bottom: 120px;
    padding-left: 10px;
    padding-right: 100px;
  }
  .vasp-tip{
    margin-bottom: 100px;
    line-height: 36px;
    font-size: 18px;
    width: 100%;
    padding-left: 110px;
  }
  .mit-vasp{
    font-size: 18px;
    border-radius: 5px;
    padding: 0;
    line-height: 40px;
  }
.input-box{
  margin: 0 2px;
  line-height: 40px;
  height: 40px;
  color: #999;
  font-size: 15px;
  letter-spacing: 2px;
  width: 100px !important;
  text-align: center;
  border-bottom: 1px #999 solid;

  .uni-input-placeholder{
    font-size: 12px;
    color: #999;
    letter-spacing: 1px;
  }
}


	.image-content{
		width: 96%;
		margin: 0 auto;
		
	}
	.image-content image{
		border-radius: 10px;
		margin-top: 10px;
	}

.tabcon2{
		width: 99%;
		margin: 0 auto;
		height: auto;
		border-radius: 10px;
	}
	.uni-input{
		width:100px !important;
		margin: 0 auto;
		text-align: center;
	}

	.uni-input .uni-input-placeholder{
		text-align: center;
	}

.dhcon view{
	width: 30%;
	height: 150px;
	float: left;
	margin: 0 1.5% 0 1.5%;
	background-color: aquamarine;
	background-image: url('@/static/images/lvse1.png');
	background-size: cover;
	border-radius: 3px;
}
</style>
